<template>
	<view>
		<view class="un-auditPlan-tou">
			<view >
				<text>服务单号 ：</text>
				<text>{{recordId}}</text>
			</view>
			<view >
				<text>申请时间 ：</text>
				<text>2017-05-01 16:00</text>
			</view>
		</view>
		
		<view class="un-auditPlan-title">
			<text v-if="false">审核进度 :</text>
			<text class="iconfont icon-dui un-icon"></text>
			您的售后服务单已完成，感谢您的支持与理解！
		</view>
		
		<view class="trace-item">
			<view class="trace-item-header">
					<text>进度跟踪</text>
			</view>
			<view class="trace-item-detail">
				<view class="uni-timeline" >
					<view class="uni-timeline-item uni-timeline-first-item" v-for="(item,index) in list2" :key="index" v-if="index===0">
						<view class="uni-timeline-item-divider"></view>
						<view class="uni-timeline-item-content">
							<view>{{item.title}}</view>
							<view >经办人 : {{item.person}}</view>
							<view class="datetime">{{item.desc}}</view>
						</view>
					</view>
					<view class="uni-timeline-item" v-for="(item,index) in list2" :key="index" v-if="index!==0 && index!==list2.length-1">
						<view class="uni-timeline-item-divider"></view>
						<view class="uni-timeline-item-content">
							<view>{{item.title}}</view>
							<view>经办人 : {{item.person}}</view>
							<view class="datetime">{{item.desc}}</view>
						</view>
					</view>
					<view class="uni-timeline-item uni-timeline-last-item" v-for="(item,index) in list2" :key="index" v-if="index===list2.length-1">
						<view class="uni-timeline-item-divider"></view>
						<view class="uni-timeline-item-content">
							<view>{{item.title}}</view>
							<view>经办人 : {{item.person}}</view>
							<view class="datetime">{{item.desc}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				recordId:'',
				list2: [{
					title: '您的服务单财务已退款，请注意查收',
					person:'laijiarong',
					desc: '2017-05-11 11:55:11'
				}, {
					title: '您的服务单退款申请业务主管已审核，等待财务确认',
					person:'laijiarong',
					desc: '2017-05-11 11:51:33'
				}, {
					title: '您的服务单已提交退款申请',
					person:'laijiarong',
					desc: '2017-05-11 11:51:33'
				}, {
					title: '您的服务单198014266的商品已收到',
					person:'huangqing23',
					desc: '2017-05-11 11:31:13'
				}, {
					title: '您的服务单已审核通过，请将商品寄往售后部',
					person:'李颖',
					desc: '2017-05-10 09:20:04'
				}, {
					title: '您的服务单已申请成功，待售后审核中',
					person:'系统',
					desc: '2017-05-10 01:10:40'
				}]
			}
		},
		onLoad(options) {
			this.recordId=options.recordId;
			uni.startPullDownRefresh();
		},
		onPullDownRefresh() {
			console.log('refresh');
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F5F5F5;
	}
	
	.un-auditPlan-tou{
		background-color: #FFFFFF;
		font-size: 28upx;
		color: #999999;
		padding:40upx 40upx;
		line-height: 60upx;
	}
	
	.un-auditPlan-title{
		padding: 30upx 40upx;
		background-color: #FFFFFF;
		margin: 25upx 0upx;
		font-size: 25upx;
		color: #999999;
		.un-icon{
			color: #E02E24;
			font-weight: 700;
			margin-right: 10upx;
			font-size: 20upx;
		}
	}
	
	
	.trace-item{
		background-color: #FFFFFF;
		.trace-item-header{
			color: #999999;
			font-size: 28upx;
			border-bottom: 1upx solid rgba(242, 242, 242, 1);
			line-height: 90upx;
			padding: 0upx 40upx;
		}
		.trace-item-detail{
			padding: 10upx 65upx;
			.uni-timeline { margin: 35upx 0; display: flex; flex-direction: column; position: relative; }
			.uni-timeline-item { display: flex; flex-direction: row; position: relative; padding-bottom: 40upx; box-sizing: border-box; overflow: hidden; font-size: 25upx;color: #999999;line-height: 40upx}
			.uni-timeline-item .uni-timeline-item-divider { flex-shrink: 0; position: relative; width: 20upx; height: 20upx;left: 3upx; top: 11upx; border-radius: 50%; background-color: #CCCCCC; }
			.uni-timeline-item-divider::before,
			.uni-timeline-item-divider::after { position: absolute; left: 11upx; width: 1upx; height: 100vh; content: ''; background: inherit; }
			.uni-timeline-item-divider::before { bottom: 100%; }
			.uni-timeline-item-divider::after { top: 100%; }
			.uni-timeline-first-item .uni-timeline-item-divider::after { left: 13upx;}
			.uni-timeline-first-item .uni-timeline-item-divider:before { display: none; }
			.uni-timeline-last-item .uni-timeline-item-divider:after { display: none; }
			.uni-timeline-item .uni-timeline-item-content { padding-left: 40upx; }
			.uni-timeline-item-content .datetime{ color: #CCCCCC; }
			/* 自定义节点颜色 */
			.uni-timeline-first-item .uni-timeline-item-divider{ background-color: #E02E24; width: 30upx; height: 30upx; left: 0upx;}
		}
	}

</style>
